<template>
  <div>
    <Modal v-model="innerVisible" title="新增" width="350px" @on-cancel="handleCancel">
      <Form ref="addForm" :model="addForm">
        <!--TODO 修改addForm对象-->
        <FormItem prop="bookName" label="书名">
          <Input type="text" v-model="addForm.bookName" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
        <FormItem prop="author" label="作者">
          <Input type="text" v-model="addForm.author" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { addBook } from '@/api/book'

export default {
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      innerVisible: this.visible,
      addForm: {
        bookName: '',
        author:'',
      },
    }
  },
  watch: {
    visible(newValue) {
      this.innerVisible = newValue
    },
  },
  methods: {
    async handleSubmit() {
      console.log(this.addForm)
      const res = await addBook(this.addForm)
      if (res.code === 0) {
        this.$Message.success('操作成功')
        this.$emit('close')
      } else {
        this.$Message.error('操作失败' + res.message)
      }
    },
    handleCancel() {
      this.$emit('close')
    },
  },
}
</script>

<style scoped></style>
